CodeSandboxの埋め込みオプションまとめ（前編）

こんにちは、CX事業本部 IoT事業部の若槻です。

CodeSandboxは、Webアプリの作成と共有を迅速に行うことができるオンラインコードエディターおよびプロトタイピングツールです。

• CodeSandbox: Online Code Editor and IDE for Rapid Web Development

今回は、CodeSandboxのサンドボックスをブログ記事などに埋め込む際のオプションまとめの前編です。（後編はこちら）

まとめ

既定

サンドボックスの埋め込み（Embed）はiframeのコードを使用して行います。

埋め込み用コードはサンドボックスのページから取得できます。取得方法はこちらをご確認ください。下記は既定のコードです。

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

このサンドボックスの埋め込みのカスタマイズはiframeのオプションを使用して行います。

高さ

属性	オプション	値	既定値	説明
style	height	px	500px	サンドボックスの高さ

• height:250px

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark"
  style="width:100%; height:250px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

ページに対する横幅の比率

属性	オプション	値	既定値	説明
style	width	%/px	100%	ページの横幅に対するサンドボックスの横幅の比率

• width:70%

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark"
  style="width:70%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

縦横の縮尺

属性	オプション	値	既定値	説明
style	下記参照（対象ブラウザごとに異なります）	既定値に対する縮尺	1	表示するサンドボックスの縦横の縮尺

• transform:scale(0.55); -o-transform:scale(0.55); -webkit-transform:scale(0.55); -moz-transform:scale(0.55); -ms-transform:scale(0.55);

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden; transform:scale(0.55); -o-transform:scale(0.55); -webkit-transform:scale(0.55); -moz-transform:scale(0.55); -ms-transform:scale(0.55);"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

テーマ

属性	オプション	値	既定値	説明
src	theme	dark/light	dark	サンドボックスのテーマ

• theme=light

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=light"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

ビュー

属性	オプション	値	既定値	説明
src	view	editor/split/preview	preview	既定のビュー

• view=split

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&view=split"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

• view=editor

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&view=editor"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

エディターサイズ

属性	オプション	値	既定値	説明
src	editorsize	数値	50	エディターサイズの比率（スプリットビューの場合）

• editorsize=70

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&view=split&editorsize=70"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

CodeMirrorエディター

属性	オプション	値	既定値	説明
src	codemirror	0/1	0	CodeMirrorエディターの使用（埋め込みサイズが軽量化される）

• codemirror=1

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&view=editor&codemirror=1"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

エディターでコードブロックの折りたたみが出来なくなっています。

コードハイライト

属性	オプション	値	既定値	説明
src	highlights	行番号をコンマで指定		コードの行のハイライト（CodeMirrorを使用時のみ）

• highlights=6,7

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&codemirror=1&highlights=6,7"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

フォントサイズ

属性	オプション	値	既定値	説明
src	fontsize	ピクセル数	14	エディターのフォントサイズ

• fontsize=8

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=8&hidenavigation=1&theme=dark&view=editor"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

後編

• CodeSandboxの埋め込みオプションまとめ（後編）

参考

• Embedding - CodeSandbox Documentation
• 外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 | アシアルブログ

以上